/**
 *  Created by lixin on 2019-11-19
 *
 *  自定义布局
 *
 *  |  参数名称      |   参数类型   | 参数说明
 *  | dataSource    |    Array    | 宫格布局数据源
 *  | col           |    String   | 表示每个单元占用的大小，总12，不传默认自动分配
 *
 *  dataSource 参数说明
 *
 *  |   参数        |   类型    | 说明
 *  |   title      |  String   | 宫格标题
 *  |   num        |  Number   | 宫格副标题
 *  |   unit       |  String   | 宫格副标题补充
 *  |   icon       |  String   | 每个单元的icon
 *  |   color      |  String   | 表示icon的颜色
 * */
import Taro, {Component} from '@tarojs/taro'
import {Text, View} from '@tarojs/components'
import {AtIcon, AtToast} from 'taro-ui'
import './myGrid.less'
import 'taro-ui/dist/style/components/flex.scss';


export default class MyGrid extends Component {

  constructor(props) {
    super(props);

    this.state = {
      isOpened: false,
    }
  }

  onClick = () => {

    this.setState({
      isOpened: !this.state.isOpened
    })

  }
  /**
   * data 数据
   * col 传入表示每个单元占多少 总长12
   * 如果传参包含num 和 unit 则显示他俩
   * 如果只传了num则显示num
   * 如果传 icon 则显示AtIcon
   * */
  getItem = (data, col) => {
    const _col = col || '';
    if (data) {

    }

  }

  render() {

    const {isOpened} = this.state;

    const {
      dataSource,
      col
    } = this.props;

    if (!dataSource || !dataSource.length) {
      return <View/>
    }

    const _col = col || '';
    return (
      <View className='at-row at-row--wrap my-row'>
        {
          dataSource.map((value, index) => {
            const _icon = value.icon || 'help';
            const _color = value.color || '#000';
            const _key = value.title + index;
            return (
              <View className={`at-col ${_col} my-col`} key={_key} onClick={this.onClick}>
                {
                  value.hasOwnProperty('num') && value.hasOwnProperty('unit') ? (
                    <Text className='assets-content'>
                      {
                        <Text className='assets-num'>{value.num}</Text>
                      }
                      <Text>{value.unit}</Text>
                    </Text>
                  ) : (
                    <View>
                      {
                        value.hasOwnProperty('num') ? (
                          <Text className='assets-num'>
                            {
                              value.num
                            }
                          </Text>
                        ) : (
                          <View className='spacing'>
                            <AtIcon value={_icon} size='20px' color={_color}/>
                          </View>
                        )
                      }
                    </View>
                  )
                }
                <p>
                  {
                    value.title
                  }
                </p>
              </View>
            )
          })
        }
        <AtToast
          isOpened={isOpened}
          status='loading'
          text="正在努力建设中..."
          duration={500}
          onClose={this.onClick}
        />
      </View>
    )
  }
}
